import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Modal,
  TouchableOpacity,
  Dimensions,
  Platform,
  Animated,
} from 'react-native';
import Constant from '../../../utils/Constant'//全局变量


import RangeSlider from 'rn-range-slider';

const isIos = Platform.OS == 'ios';


const { height: SCREEN_HEIGHT } = Dimensions.get('window');

class PriceRangeModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalAnimation: new Animated.Value(0),
      selectedRange: [0, 50],
      selectedButton: '不限',
      priceShowText: '不限',
      markedPriceMin: 0,
      markedPriceMax: 0
    };
  }

  componentDidMount() {
    if (this.refs._rangeSlider) {
      this.refs._rangeSlider.setLowValue(this.props.markedPriceMin);
      if (this.props.markedPriceMax == 0) {
        this.refs._rangeSlider.setHighValue(60);
      } else {
        this.refs._rangeSlider.setHighValue(this.props.markedPriceMax);
      }

    }
  }

  componentDidUpdate(prevProps) {
    if (this.props.visible && !prevProps.visible) {
      this.animateIn();
    } else if (!this.props.visible && prevProps.visible) {
      this.animateOut();
    }

    // if (this.refs._rangeSlider) {
    //   this.refs._rangeSlider.setLowValue(this.props.markedPriceMin);
    //   if (this.props.markedPriceMax == 0) {
    //     this.refs._rangeSlider.setHighValue(60);
    //   } else {
    //     this.refs._rangeSlider.setHighValue(this.props.markedPriceMax);
    //   }

    // }
  }

  animateIn = () => {
    Animated.timing(this.state.modalAnimation, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  animateOut = () => {
    Animated.timing(this.state.modalAnimation, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  handleRangeButton = (range, index) => {
    this.setState({
      selectedButton: range,
      priceShowText: range
    });
    if (index == 0) {
      this.setState({
        markedPriceMin: 0,
        markedPriceMax: 0
      })
    } else if (index == 1) {
      this.setState({
        markedPriceMin: 1,
        markedPriceMax: 5
      })
    } else if (index == 2) {
      this.setState({
        markedPriceMin: 5,
        markedPriceMax: 10
      })
    } else if (index == 3) {
      this.setState({
        markedPriceMin: 10,
        markedPriceMax: 15
      })
    } else if (index == 4) {
      this.setState({
        markedPriceMin: 15,
        markedPriceMax: 20
      })
    } else if (index == 5) {
      this.setState({
        markedPriceMin: 20,
        markedPriceMax: 30
      })
    } else if (index == 6) {
      this.setState({
        markedPriceMin: 30,
        markedPriceMax: 50
      })
    } else if (index == 7) {
      this.setState({
        markedPriceMin: 50,
        markedPriceMax: 0
      })
    }
  };

  render() {
    const translateY = this.state.modalAnimation.interpolate({
      inputRange: [0, 1],
      outputRange: [-SCREEN_HEIGHT*0.5, 0],
    });

    const priceRanges = [
      '不限', '1-5万', '5-10万', '10-15万',
      '15-20万', '20-30万', '30-50万', '50万以上'
    ];

    return (
      <Modal
        transparent
        visible={this.props.visible}
        onRequestClose={this.props.onClose}
        animationType="none"
      >
        <TouchableOpacity
          style={styles.overlay}
          activeOpacity={1}
          onPress={this.props.onClose}
        />
        <Animated.View
          style={[
            styles.contentContainer,
            {top: isIos ? Constant.statusBarHeight+44:49, transform: [{ translateY }] }
          ]}
        >
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10 }}>
            <Text style={{ fontSize: 14, color: '#333333', fontWeight: 'bold' }}>价格区间</Text>
            <Text style={{ fontSize: 14, color: '#ff9c00' }}>{this.state.priceShowText}</Text>
          </View>

          <View style={styles.priceRangeButtons}>
            {priceRanges.map((range, index) => (
              <TouchableOpacity
                key={index}
                style={[
                  styles.rangeButton,
                  this.state.selectedButton === range && styles.selectedButton
                ]}
                onPress={() => this.handleRangeButton(range, index)}
              >
                <Text style={[
                  styles.rangeButtonText,
                  this.state.selectedButton === range && styles.selectedButtonText
                ]}>
                  {range}
                </Text>
              </TouchableOpacity>
            ))}
          </View>

          <View style={styles.sliderContainer}>

            <RangeSlider
              ref="_rangeSlider"
              style={{ width: '100%', height: 60 }}
              gravity={'center'}
              min={0}
              max={60}
              step={1}
              selectionColor="#ffdb1b"
              blankColor="#e4e4e4"
              labelStyle={'none'}
              onValueChanged={(low, high, fromUser) => {
                this.changePrice(low, high)
              }}
              thumbBorderWidth={4}
              thumbBorderColor={'#fff'}
              thumbColor={'#ffdb1b'}
            />
            <View style={styles.sliderLabels}>
              <Text>0</Text>
              <Text>10</Text>
              <Text>20</Text>
              <Text>30</Text>
              <Text>40</Text>
              <Text>50</Text>
              <Text>不限</Text>
            </View>
          </View>

          <TouchableOpacity
            style={styles.confirmButton}
            onPress={() => {
              this.props.onConfirm(this.state.markedPriceMin, this.state.markedPriceMax, this.state.priceShowText);
              this.props.onClose();

            }}
          >
            <Text style={styles.confirmButtonText}>确定</Text>
          </TouchableOpacity>
        </Animated.View>
      </Modal>
    );
  }

  changePrice(leftValue, rightValue) {
    console.log('changePrice', leftValue, rightValue)
    let priceText = ''
    if (leftValue == 0 && rightValue == 60) {
      priceText = '不限'
    } else if (leftValue == 0) {
      priceText = rightValue + "万以下"

    } else if (leftValue >= 1 && rightValue == 60) {
      priceText = leftValue + "万以上"

    } else if (leftValue >= 1) {
      priceText = leftValue + "-" + rightValue + "万"

    }

    this.setState({
      priceShowText: priceText,
      markedPriceMin: leftValue,
      markedPriceMax: rightValue
    })
  }

}

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
  },
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    marginTop: 100
  },

  contentContainer: {
    position: 'absolute',
    top: 100,
    left: 0,
    right: 0,
    backgroundColor: '#fff',
    padding: 20,
  },
  priceRangeButtons: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  rangeButton: {
    width: '23%',
    padding: 10,
    borderRadius: 5,
    backgroundColor: '#F5F5F5',
    marginBottom: 10,
    alignItems: 'center',
  },
  selectedButton: {
    backgroundColor: '#fffadb',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#ffde00',
  },
  rangeButtonText: {
    fontSize: 12,
    color: '#333',
  },
  selectedButtonText: {
    color: '#000',
    fontSize: 12
  },
  sliderContainer: {
    marginBottom: 20,
  },
  slider: {
    width: '100%',
    height: 40,
  },
  sliderLabels: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 5,
  },
  confirmButton: {
    backgroundColor: '#FFEB00',
    padding: 15,
    borderRadius: 5,
    alignItems: 'center',
  },
  confirmButtonText: {
    fontSize: 16,
    fontWeight: '500',
  },
});

export default PriceRangeModal;